<template>
  <div>
    <div id="line4"></div>
    <!-- <div style="margin-top: 20px;"></div> -->
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
    this.fetchList()
  },
  methods: {
    async fetchList(){
      const response = await this.$http.get("metrics/CommentCountsByDay")
      if (response.status == 200) {
        const data = response.data
        this.timeList = data.map(item => item.time)
        this.valueList = data.map(item => item.value)
        this.updateChartData()
      }
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("line4"));

      this.chart.setOption({
        title: {
          text: "实时热度",
          textStyle: {
            color: "#d1e6eb",
            fontSize: 20
          },
          left: "center",
          top: "0"
          // subtext: '纯属虚构'
        },
        grid: {
          top: "18%",
          left: "4%",
          right: "2%",
          bottom: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          formatter: function(v) {
            return (
              v[0].name +
              ":" +
              v[0].data.toString().replace(/(\d)(?=(\d{3})+(\.|$))/g, "$1,")
            );
          }
        },
        xAxis: {
          data: ["2020-01-01", "2020-01-02", "2020-01-03", "2020-01-04", "2020-01-05", "2020-01-06", "2020-01-07"],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#f9f9f9"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#d1e6eb",
              margin: 15
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256"
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: "#d1e6eb"
            }
          }
        },
        series: [
          {
            name: "数值",
            type: "line",
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: "white" // 设置标签文字颜色
                  }
                }
              },
              data: [
                // { type: "max", name: "最大值", symbol: "circle", symbolSize: 8 }, // 设置最大值的标记点样式
                // { type: "min", name: "最小值", symbol: "circle", symbolSize: 8 }  // 设置最小值的标记点样式
              ]
            },
            data: [0,0, 0, 0, 0, 0, 0]
          }
        ]
      });
    },
    updateChartData(){
      this.chart.setOption({
        xAxis: {data: ["2020-01-01", "2020-01-02", "2020-01-03", "2020-01-04", "2020-01-05", "2020-01-06", "2020-01-07"]},
        series: [{data: this.valueList}]
      })
    }
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = "";
  }
};
</script>

<style lang="scss" scoped>
#line4 {
  width: 100%;
  height: 40vh;
}
</style>
